<template>
  <div class="page-index">
    <div class="header-box" style="position: fixed;top: 0;left: 0;right: 0;z-index:2;">
      <PageHeader title="分摊"></PageHeader>
    </div>
   <div class="main">
    <div class="top">
      <div class="top-left">
        <span>1</span>条费用，金额：<span>¥ 2,090.00</span>
      </div>
      <div class="top-right">
        平均分摊
      </div>
    </div>
    <div class="center">
      <div class="share-list-box">
        <ul class="share-list">
          <li>
            <div class="share-list-row1">
              <div class="row1-left">
                <div class="row1-left-icon"></div>
                <div class="row1-left-text">
                  分摊（1）
                </div>
              </div>
              <div class="row1-right">
                删除
              </div>
            </div>
            <div class="share-list-row2">
              <div class="row2-left">
                <van-field v-model="moneyValue" required class="money-cell">
                  <template #label>
                    <div class="money-label">
                      <span>承担金额</span>
                      <span>CNY</span>
                    </div>
                  </template>
                </van-field>
              </div>
              <div class="row2-right">
                填充金额
              </div>
            </div>
            <div class="share-list-row3">
                <van-field v-model="ratioValue" required class="ratio-cell" label="承担比例" placeholder="请输入承担比例">
                </van-field>
            </div>
            <div class="share-list-row4">
                <van-field 
                  class="department-cell"
                  required
                  v-model="departmentValue"
                  label="承担部门"
                  right-icon="arrow" 
                  placeholder="请选择" 
                  @click="showDepartment=true"
                />
            </div>
          </li>
        </ul>
        <div class="button-group">
          <div class="button-left">
            <div class="button-left-icon">
              <img src="../../assets/share/del.png" alt="">
            </div>
            <div class="button-left-text">删除全部</div>
          </div>
          <div class="button-center"></div>
          <div class="button-right">
            <div class="button-right-icon">
              <img src="../../assets/share/add.png" alt="">
            </div>
            <div class="button-right-text">添加分摊</div>
          </div>
        </div>
      </div>
    </div>
   </div>
   <div class="bottom">
    <van-button type="info">取消</van-button>
    <van-button type="info">确定</van-button>
   </div>
   <van-popup v-model="showDepartment" round position="bottom" :style="{
			height: '50%'
		}" get-container="body">
			<van-picker title="承担部门" show-toolbar :columns="departmentColumns" value-key="itemName"
				@confirm="departmentOnConfirm" @cancel="showDepartment =false" />
		</van-popup>
  </div>
</template>
<script>
import PageHeader from "../../../src/components/header"
export default {
  data() {
    return {
        title:'飞机',
        moneyValue:'123',
        ratioValue:'',//承担比例
        departmentValue:'',//承担部门
        showDepartment:false,
        departmentColumns:['demo', '宁波1', '温州1', '嘉兴1', '湖州1'],
        
    };
  },
  components:{
        PageHeader
  },
  methods:{
      // 承担部门弹窗的确认按钮
    departmentOnConfirm(value,index) {
      // this.dangerTypeValue = value;
      this.departmentValue = value.itemName;
      this.showDepartment = false;
    },
  }
}
</script>
<style lang="scss" scoped>
   html{
    overflow: hidden;
   }
   .main{
    margin-top: 63.98px;
    background: rgba(250, 250, 250, 1);
    overflow-y: auto;
    margin-bottom: 44px;
    height:1000px;
    .top{
     background: rgba(255, 255, 255, 1);
     box-shadow: 0px 4px 8px rgb(238 238 238);
     margin-bottom: 12px;
     height: 56px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 0 16px 0 24px;
     font-family:"SimHei";
     .top-left{
      color: rgba(153, 153, 153, 1);
      font-size: 14px;
      span{
        color: rgba(23, 119, 255, 1);
        font-size: 16px;
      }
     }
     .top-right{
      width: 56px;
      height: 24px;
      color: rgba(23, 119, 255, 1);
      font-size: 14px;
      line-height: 24px;
     }
    }
    .center{
      .share-list-box{
        .share-list{
          margin: 0;
          padding: 0;
          li{
            margin: 0 0 12px;
            padding: 10px 24px 14px 16px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 4px 8px rgba(238, 238, 238, 1);
            .share-list-row1{
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-size: 14px;
              font-family:"SimHei";
              margin-bottom: 12px;
              .row1-left{
                display: flex;
                justify-content: flex-start;
                align-items: center;
                .row1-left-icon{
                  width: 3px;
                  height: 16px;
                  background: rgba(23, 119, 255, 1);
                  border-radius: 2px;
                  margin-right: 5px;
                }
                .row1-left-text{
                  height: 20px;
                  color: rgba(102, 102, 102, 1);
                  line-height: 20px;
                }
              }
              .row1-right{
                // height: 24px;
                color: rgba(23, 119, 255, 1);
                line-height: 24px;
              }
            }
            .share-list-row2{
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-size: 14px;
              font-family:"SimHei";
              padding-bottom: 10px;
              border-bottom:  1px solid rgba(245, 245, 245, 1);
              margin-bottom: 12px;
              .row2-left{
                .money-cell{
                  box-sizing: border-box;
                  border-top: none;
                  padding: 0 0 0 6px;
                  .money-label{

                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    padding-right: 18px;
                    border-right: 1px solid rgba(238, 238, 238, 1);
                    span{
                      color: rgba(51, 51, 51, 1);
                      font-size: 14px;
                      line-height: 20px;
                      font-family:"SimHei";
                    }
                    span:first-of-type{
                      display: inline-block;
                      width: 58px;
                      height: 20px;
                      color: rgba(0, 0, 0, 1);
                      margin-right: 32px;
                    }
                  }                
                }
              }
              .row2-right{
                width: 60px;
                color: rgba(23, 119, 255, 1);
                line-height: 24px;
              }
            }
            .share-list-row3{
              padding-bottom: 12px;
              border-bottom:  1px solid rgba(245, 245, 245, 1);
              margin-bottom: 12px;
              .ratio-cell{
                  box-sizing: border-box;
                  border-top: none;
                  padding: 0 0 0 6px; 
                  line-height: 20px;            
                }
            }
            .share-list-row4{
              .department-cell{
                  box-sizing: border-box;
                  border-top: none;
                  padding: 0 0 0 6px; 
                  line-height: 20px; 
              }
            }
          }
        }
        .button-group{
          display: flex;
          justify-content: center;
          align-items: center;
          background: rgba(255, 255, 255, 1);
          box-shadow: 0px 4px 8px rgba(238, 238, 238, 1);
          margin-bottom: 12px;
          padding: 16px 0px;
          .button-left{
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 54px;
            .button-left-icon{
              width: 14px;
              height: 14px;
              margin-right: 4px;
              img{
                width: 100%;
                height:100%;
              }
            }
            .button-left-text{
              height: 20px;
              color: rgba(255, 87, 51, 1);
              font-size: 14px;
              line-height: 20px;
            }
          }
          .button-center{
            width: 0px;
            height: 12px;
            border: 1px solid rgba(238, 238, 238, 1);
          }
          .button-right{
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 53px;
            .button-right-icon{
              width: 14px;
              height: 14px;
              margin-right: 4px;
              img{
                width: 100%;
                height:100%;
              }
            }
            .button-right-text{
              height: 20px;
              color: rgba(23, 119, 255, 1);
              font-size: 14px;
              line-height: 20px;
            }
          }
        }
      }

    }
   }
   .bottom{
      padding: 14px 24px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: fixed;
      left:0;
      bottom:50px;
    }
   ::v-deep .van-field__label{
      color: rgba(51, 51, 51, 1);
      font-size: 14px;
      line-height: 20px;
      font-family:"SimHei";
      width: auto;
      margin-right: 32px;
   }
   .money-cell ::v-deep .van-field__label{
    width: auto;
    margin-right: 16px;
   }
   .money-cell ::v-deep .van-field__control{
      color: rgba(23, 119, 255, 1);
      font-size: 14px;
      line-height: 20px;
      font-family:"SimHei";
    }
    ::v-deep .van-cell--required::before {
        position: absolute;
        left: 0;
        color: #ee0a24;
        font-size: 3.73vw;
        content: '*';
    }
    .bottom ::v-deep .van-button{
      border-radius: 18px;
      height: 36px;
      color: rgba(51, 51, 51, 1);
      // font-size: 16px;
      line-height: 36px;
   }
   .bottom ::v-deep .van-button:nth-of-type(1){
      // width: 86px;
      // height: 20px;
      color: rgba(51, 51, 51, 1);
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 4px 8px rgba(238, 238, 238, 1);
      padding: 0px 58px;
      margin-right: 11px;
   }
   .bottom ::v-deep .van-button:nth-of-type(2){
      color: rgba(255, 255, 255, 1);
      background: rgba(23, 119, 255, 1);
      box-shadow: 0px 4px 8px rgba(23, 119, 255, 0.3);
      // width: 42px;
      // height: 24px;
      padding: 0px 58px;
   }
</style>
